<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,
    maximum-scale=1.0,minimum-scale=1.0">
    <!-- css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入首页css -->
    <link rel="stylesheet" href="css/index2.css">
    <title>flex弹性布局</title>
    <style>
        div{
            width: 80%;
            height: 200px;
            background-color: pink;
            display: flex;
            /* flex-direction: row-reverse; */
            /* flex-direction: column-reverse; */
            /* flex-direction: row; */
            /* flex-direction: column; */
            /* 设置主轴元素的排列方式 */
            /* justify-content:flex-end; */
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边,再平分剩余空间 */
            /* justify-content: space-between; */
            /* justify-content: center; */
            /* align-items:flex-end; */
            /* flex-wrap: wrap; */
            /* align-content: space-between; */
            /* flex-flow: row wrap; */
            /* align-items: center; */
            

        }
        div span{
           height: 50px;
            background-color: rgb(46, 132, 245);
            margin: 5px;
            /* flex: 1; */
            text-align: center;
            line-height: 50px;
            color: aliceblue;
        }
        div .one{
           flex: 1;
           order: 2;
        }
        div .two{
            flex: 1;
            order: 0;
        }
        div .three{
            flex: 1;
            /* align-self: flex-end; */
            order: 4;
        }
    </style>
</head>

<body>
    <div>
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <!-- <span>4</span>
        <span>5</span>
        <span>6</span> -->
       
    </div>
</body>

</html>